<template>
  <div class="find-pwd">
    <el-form
      key="form"
      style="width:320px"
      ref="form"
      :model="form"
      :rules="rules"
      autocomplete="on"
      label-position="right"
    >
      <div class="title">
        <span class="title-icon">
          <svg-icon name="page_tltle_pw" />
        </span>
        <span>找回密码</span>
      </div>

      <div class="sub-title">输入您要找回密码的{{ supportMethods }}</div>
      <el-form-item prop="email_mobile">
        <el-input
          key="sentEmail"
          v-model="form.email_mobile"
          type="text"
          :placeholder="'请输入' + supportMethods"
          name="email"
          autocomplete="on"
        >
          <span slot="prefix" class="svg-container">
            <svg-icon name="icon_user" />
          </span>
        </el-input>
      </el-form-item>

      <el-button
        v-waves
        :loading="loading"
        type="primary"
        class="send-email"
        @click="handleSubmit"
        >确定</el-button
      >
    </el-form>
    <div class="color-pr text-center">
      <router-link to="/login">
        <svg-icon name="arrow1" />
        返回登录
      </router-link>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * generate by vscode
 */
import { resentEmail, resetPassword, getResetMsgCode } from '@/api/system/users'
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Form } from 'element-ui'
import { isValidMobile, isValidEmail } from '@/utils/validate'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'find-pwd'
})
export default class FindPwd extends Vue {
  @Prop() someProp?: any
  loading = false
  token = ''
  form = { email_mobile: '' }
  get loginMethods(): any {
    return UserModule.sysConfig ? UserModule.sysConfig.loginMethods : {}
  }
  get isEmail() {
    return this.loginMethods.email
  }
  get isMobile() {
    return this.loginMethods.mobile
  }
  get supportMethods() {
    const support = []
    this.isEmail && support.push('邮箱')
    this.isMobile && support.push('手机号')
    return support.join('/')
  }

  get rules() {
    return {
      email_mobile: [
        {
          required: true,
          type: 'string',
          trigger: 'blur',
          validator: (r: any, value: string, cb: any) => {
            if (!value) {
              return cb(new Error('请输入' + this.supportMethods))
            }
            const vads = []
            this.isEmail && vads.push(isValidEmail)
            this.isMobile && vads.push(isValidMobile)
            if (!vads.length || vads.some(o => o(value))) {
              return cb()
            }
            cb(new Error('无效的' + this.supportMethods))
          }
        }
      ]
    }
  }

  handleSubmit() {
    const form = this.$refs.form as Form
    try {
      form.validate(async (valid: boolean) => {
        if (!valid) {
          return
        }
        if (isValidEmail(this.form.email_mobile)) {
          this.loading = true
          try {
            await resentEmail({
              method: 'email',
              email_mobile: this.form.email_mobile
            })
            this.$router.replace({
              name: 'successEmail',
              params: {
                email: this.form.email_mobile
              }
            })
          } catch {
            //
          }
          this.loading = false
          return
        }
        if (isValidMobile(this.form.email_mobile)) {
          // 发送验证码
          this.loading = true
          try {
            await getResetMsgCode(this.form.email_mobile)
            this.$router.replace({
              name: 'resetPwd',
              query: {
                m: this.form.email_mobile,
                t: Date.now().toString()
              }
            })
          } catch {
            //
          }
          this.loading = false
          return
        }
      })
    } catch {
      //
    }
  }
}
</script>
<style lang="scss" scoped>
.find-pwd {
  .sub-title {
    color: #666;
    text-align: center;
    margin-bottom: 20px;
  }
  .send-email {
    width: 100%;
    margin: 10px 0 40px 0;
  }
}
</style>
